<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="container-haed">
					<view class="container-haed-info">
						<view class="container-haed-info-left">
							<image src="../../static/avther.png" mode="aspectFill"></image>
							<view class="container-haed-info-left-text">
								<view>{{userInfo.nickname ? userInfo.nickname : '-'}}</view>
								<view>手机号码：{{userInfo.mobile ? userInfo.mobile : '-'}}</view>
							</view>
						</view>
						<view class="container-haed-info-right" @click="jumt">
							提现
						</view>
						<view class="container-haed-info-bg">
							<image
								src="https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612062137171818769755720.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view>
						<!-- 		   	<view class="container-haed-day">
		   		<view class="container-haed-day-all">
		   			<view style="font-size: 24rpx;">总佣金(元)</view>
		   			<view style="font-size: 28rpx;">2675.00</view>
		   		</view>
		   		<view class="container-haed-day-line">
		   		
		   		</view>
		   		<view class="container-haed-day-money">
		   		   <view style="font-size: 24rpx;">今日收益(元)</view>
		   		   <view style="font-size: 28rpx; color: #E12626;">375.00</view>
		   		</view>
		   	</view> -->
						<view style="margin: 0 30rpx;">
							<u-line></u-line>
						</view>
					</view>
					<view class="container-haed-money">
						<view class="container-haed-money-item">
							<view>可提现(元)</view>
							<view>{{
		   					userInfo.balance_money || '0.00'
		   				}}</view>
							<view class="container-haed-money-item-line">

							</view>
						</view>
						<view class="container-haed-money-item">
							<view>账户总收益(元)</view>
							<view>{{ userInfo.total_income || '0.00' }}</view>
							<view class="container-haed-money-item-line">

							</view>
						</view>
						<view class="container-haed-money-item">
							<view>已提现金额(元)</view>
							<view>{{ userInfo.balance_withdraw || "0.00"}}</view>
						</view>
					</view>
				</view>

				<u-calendar
				   :show="showDate" 
				    mode="single" 
					rowHeight="90"
					 :minDate="minDate"
					 monthNum="20"
					 :maxDate="maxDate"
					@close="showDate = false" 
				   closeOnClickOverlay @confirm="confirm"></u-calendar>
				   <u-button @click="showDate = true">{{ incomeDto.month || '选择日期' }}</u-button>
			</template>

			<view class="income-centent">
				<view class="income-centent-card" v-for="(item, index) of dataList" :key="index">
					<view class="income-centent-card-title">
						收益 +{{ item.income }}元
					</view>
					<view style="margin: 0 24rpx;">
						<u-line></u-line>
					</view>
					<view class="income-centent-card-main">
						<view class="income-centent-card-main-left">
							<view style="line-height: 1.5;">收益人: {{ item.head_name }}</view>
							<view style="line-height: 1.5;">门店: {{ item.device_name }}</view>
							<view style="line-height: 1.5;">手机号: {{ item.phone }}</view>
							<view style="line-height: 1.5;">设备号: {{ item.device_id }}</view>
							<view style="line-height: 1.5;">收益时间: {{ item.create_time }}</view>
						</view>
					</view>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	import dayJS from 'dayjs'
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				showDate: false,
				userInfo: {},
				maxDate: '',
				minDate: '',
				dataList: [],
				incomeDto: {
					token: '',
					month: dayJS().format('YYYY-MM'),
					page: 1,
					page_size: 10
				}
			}
		},
		components: {

		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo') || '')
			this.incomeDto.token = uni.getStorageSync('token')
			this.maxDate = dayJS().format('YYYY-MM-DD')
			this.minDate = dayJS().add(-18, 'month').format('YYYY-MM')
		},
		methods: {
		confirm(val){
				  this.showDate = false
				  this.incomeDto.month = dayJS(val.toString()).format('YYYY-MM')
				  this.$refs.paging.reload()
				},
			queryList(page, page_size) {
				uni.showLoading({
					title: '加载中...'
				})
				const that = this
				this.incomeDto.page = page
				this.incomeDto.page_size = page_size
				request({
					url: "/kx/Personal/incomeList",
					method: "POST",
					data: this.incomeDto,
					successCb(res) {
						uni.hideLoading()
						const {
							data: tempData
						} = res.data
						if (tempData) {
							res.data.data.forEach(item => {
								item.create_time = dayJS(item.create_time * 1000).format(
									'YYYY-MM-DD HH:mm:ss')
							})
						}
						that.$refs.paging.complete(res.data.data);
					},
					failCb(res) {
						uni.hideLoading()
						that.$refs.paging.complete(false);
					}
				})
			},
			jumt() {
				uni.navigateTo({
					url: `/pages/Withdrawal/index`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #F4F4F4;
		padding-top: 20rpx;

		&-haed {
			width: 670rpx;
			margin: 24rpx auto;

			&-day {
				display: flex;
				justify-content: space-around;
				padding: 20rpx 0;
				background: #fff;
				position: relative;

				&-all {
					display: flex;
					align-items: center;
					flex-direction: column;
					color: #3D3D3D;
				}

				&-line {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 2rpx;
					height: 40rpx;
					background: #989898;
				}

				&-money {
					display: flex;
					align-items: center;
					flex-direction: column;
					color: #3D3D3D;
				}
			}

			&-info {
				position: relative;
				width: 670rpx;
				height: 160rpx;
				background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-left {
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					image {
						width: 108rpx;
						height: 108rpx;
						background-size: 100%;
					}

					view {
						color: #fff;
						font-weight: 500;
						margin-left: 10rpx;

						&:nth-child(1) {
							font-size: 28rpx;
						}

						&:nth-child(2) {
							font-size: 20rpx;
							line-height: 1.5;
						}
					}
				}

				&-bg {
					position: absolute;
					right: 0;
					top: -100rpx;
					width: 244rpx;
					height: 244rpx;

					image {
						width: 100%;
						height: 100%;
						background-size: 100%;
					}
				}

				&-right {
					width: 88rpx;
					height: 40rpx;
					color: #FF8732;
					background: #fff;
					font-size: 24rpx;
					text-align: center;
					border-radius: 30rpx;
					line-height: 40rpx;
					margin-right: 20rpx;
					z-index: 2;
				}
			}

			&-money {
				width: 670rpx;
				height: 120rpx;
				background: #fff;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				&-item {
					color: #3D3D3D;
					position: relative;

					&-line {
						position: absolute;
						top: 50%;
						right: -30rpx;
						transform: translateY(-50%);
						width: 2rpx;
						height: 40rpx;
						background: #989898;
					}

					view {
						&:nth-child(1) {
							font-weight: 500;
							font-size: 24rpx;
						}

						&:nth-child(2) {
							font-weight: 700;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}

	.card {
		&-item {
			margin: 12rpx auto;
			width: 680rpx;
			padding: 24rpx 0;
			background: $uni-bg-color;
			border-radius: 20rpx;

			&-content {
				@include layout;
				padding: 0 36rpx 0 36rpx;

				&-text {
					view {
						&:nth-child(1) {
							font-weight: 500;
							font-size: 28rpx;
							color: #3D3D3D;
						}

						&:nth-child(2) {
							margin-top: 12rpx;
							font-size: 24rpx;
							color: #8D8D8D;
						}

						&:nth-child(3) {
							font-size: 24rpx;
							color: #8D8D8D;
						}
					}
				}
			}
		}
	}

	.tab-box {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;

		&-item {
			padding: 10rpx 40rpx;
			color: #989898;

			&-active {
				color: #3D3D3D;
				font-weight: 700;
			}
		}
	}

	.income {
		&-centent {
			margin: 24rpx 0;

			&-card {
				width: 680rpx;
				background: $uni-bg-color;
				border-radius: 20rpx;
				margin: 12rpx auto;

				&-title {
					padding: 18rpx;
					font-size: 30rpx;
				}

				&-main {
					@include layout(space-between, center);
					padding: 18rpx;

					&-left {
						font-size: 24rpx;
						color: #6D6D6D;
					}

					&-right {
						font-size: 28rpx;
					}

				}
			}
		}
	}
</style>